<template>
  <van-popup v-model:show="state.show" class="popup-box" style="height: 100%" position="right">
    <div class="page">
      <global-header :title="title" @back="state.show = false" />
      <main class="page-main">
        <section class="mb-[10px]">
          <div class="label-title">标题</div>
          <div class="flex items-center mx-[15px]">
            <van-field v-model="form.title" type="text" clearable placeholder="请输入标题" />
          </div>
        </section>
        <section class="mb-[10px]">
          <div class="label-title">内容</div>
          <div class="flex items-center mx-[15px]">
            <van-field
              v-model="form.content"
              type="textarea"
              rows="5"
              clearable
              placeholder="请输入内容"
            />
          </div>
        </section>
        <section class="mb-[10px]">
          <div class="label-title">排序</div>
          <div class="flex items-center mx-[15px]">
            <van-field v-model="form.csort" type="digit" clearable placeholder="请输入排序" />
          </div>
        </section>
      </main>
      <div class="p-[15px]">
        <van-button
          :loading="state.updating"
          :disabled="state.updating"
          loading-text="保存中"
          type="primary"
          block
          @click="confirm"
          >确定</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { reqReplyAdd, reqReplyEdit } from "@/api/setting";
import { toast } from "@/utils/toast";
import { debounce } from "lodash-es";

const props = withDefaults(
  defineProps<{
    data: ReplyMo | null;
    sort: number;
  }>(),
  {}
);

const title = computed(() => (props.data ? "编辑快捷回复" : "添加快捷回复"));
const emit = defineEmits(["update", "refresh"]);
const state = reactive({
  show: false,
  updating: false
});
const form = reactive({
  title: "",
  content: "",
  csort: 0
});

const closed = () => {
  form.title = "";
  form.content = "";
  form.csort = 0;
  state.show = false;
};

const confirm = debounce(
  async () => {
    if (!form.title) {
      toast.info("请输入显示标题");
      return false;
    }
    if (!form.title) {
      toast.info("请输入发送内容");
      return false;
    }
    if (!form.csort) {
      toast.info("请输入排序");
      return false;
    }
    state.updating = true;
    try {
      if (!props.data) {
        await reqReplyAdd({
          Title: form.title,
          Content: form.content,
          CSort: Number(form.csort)
        });
        emit("refresh");
      } else {
        const params = {
          Id: props.data?.Id,
          Title: form.title,
          Content: form.content,
          CSort: Number(form.csort)
        };
        await reqReplyEdit(params);
        emit("update", params);
      }
      state.updating = false;
      toast.success("保存成功");
      setTimeout(() => {
        closed();
      }, 200);
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

const open = () => {
  state.show = true;
  nextTick(() => {
    if (props.data) {
      form.title = props.data.Title;
      form.content = props.data.Content;
      form.csort = props.data.CSort;
    } else {
      form.title = "";
      form.content = "";
      form.csort = props.sort;
    }
  });
};
defineExpose({
  open
});
</script>
<style lang="css" scoped>
.label-title {
  @apply mx-[15px] flex items-center border-l-[3px] border-solid !border-[var(--primary)] text-[14px] pl-[10px] my-[10px];
}
</style>
